<!-- 左侧面板 -->
<template>
  <div class="btn-content">
    <div class="btn-link" v-for="item in listData" :key="item.path" @click="toLink">
      <span class="title">{{ item.title }}</span>
      <right-outlined />
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { RightOutlined } from '@ant-design/icons-vue'
export default defineComponent({
  name: 'btn',
  components: { RightOutlined },
  setup() {
    const router = useRouter()
    const listData = ref([
      { title: '六成对标', path: '/lcdb' },
      { title: '投资主体', path: '/tzzt' },
      { title: '全市项目', path: '/qsxm' }
    ])
    // 跳转页面
    function toLink(url: string) {
      router.push({
        path: url
      })
    }
    return {
      listData,
      toLink
    }
  }
})
</script>
<style lang="scss" scoped>
.btn-content {
  height: 80vh * $h;
  display: flex;
  justify-content: space-between;
}

.btn-link {
  width: 260vw * $w;
  height: 100%;
  line-height: 32vh * $h;
  font-size: 32vh * $h;
  padding: 24vh * $h 0;
  border-radius: 12vh * $Bh;
  background: linear-gradient(to right, #147ab4, #13559c, #123587);
  border: 2vh * $Bh solid #4da7d9;
  display: flex;
  align-items: center;
  justify-content: center;

  .title {
    padding-right: 18vw * $w;
    letter-spacing: 6vw * $w;
  }
}
</style>
